<template>
  <div>
    <h1>床位列表</h1>
    <div class="block" style="width: 50%; margin: auto">
      <span class="demonstration">选择医院</span>
      <el-cascader
        v-model="value"
        :options="options"
        :props="{ expandTrigger: 'hover' }"
        @change="handleChange"
      ></el-cascader>
    </div>
    <!-- 表格 -->
    <el-table
      ref="multipleTable"
      :data="selectFreeBed.list"
      tooltip-effect="dark"
      style="width: 70%; margin: 0px auto"
    >
      <el-table-column prop="bid" label="床位ID" width="120"></el-table-column>
      <el-table-column
        prop="bnum"
        label="床位编号"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="manufacturerAddress"
        label="生产商地址"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="manufacturerPhone"
        label="生产商电话"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="manufacturerContacter"
        label="生产商联系人"
        width="120"
      ></el-table-column>
      <el-table-column prop="status" label="使用状态" width="120">
        <template slot-scope="scope">
          <label v-if="scope.row.status == 0">未使用</label>
          <label v-if="scope.row.status == 1">正在使用</label>
        </template>
      </el-table-column>

      <!--操作列-->
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <!-- {{ scope.row }} -->
          <el-button
            size="mini"
            type="danger"
            @click="Orders1(scope.row)"
            v-if="scope.row.status == 0"
            >下单</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 下单模态框开始 -->
    <el-dialog title="我的订单" :visible.sync="abcVisable">
      <el-form
        ref="form"
        :model="form"
        label-width="100px"
        @keyup.native.enter="saveAddHead"
      >
        <el-form-item label="床位编号">
          <el-input v-model="form.bnum" :disabled="true"></el-input>
        </el-form-item>

        <!-- <el-form-item label="选择时长">
          <el-input-number
            v-model="num"
            @change="handleChange1"
            :min="1"
            :max="99"
          ></el-input-number>
        </el-form-item> -->
        <el-form-item label="单价">
          <el-input v-model="form.beiyong1" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="abcVisable = false">取 消</el-button>
        <el-button type="primary" @click="insertOrders">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 下单模态框开始 -->
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="selectFreeBed.pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="selectFreeBed.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="selectFreeBed.total"
    >
    </el-pagination>
  </div>
</template>

<script>
import {
  insertOrder,
  freeBed,
  getBedmentByHidAndDid,
  tozhifubao,
} from "@/api/Order.js";
import { getAllHospital } from "@/api/department.js";
export default {
  data() {
    return {
      selectFreeBed: [],
      freeBedList: [],
      pageInfo: {
        pageNum: 1,
        pageSize: 5,
      },
      allHospital: [],
      departByHid: [],
      value: [],
      options: [],
      abcVisable: false,
      form: {},
      num: 1,
      zje: 0,
    };
  },
  mounted() {
    this.loadHopAndDepar();
    this.getAllHospitals();
  },
  methods: {
    //开始就加载所有的医院和科室
    loadHopAndDepar() {
      freeBed({
        pageNum: this.pageInfo.pageNum,
        pageSize: this.pageInfo.pageSize,
      }).then((res) => {
        if (res.data.code == 200) {
          this.freeBedList = res.data.data;
        }
      });
    },
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.pageInfo.pageNum = 1;
      this.freeBeds();
    },
    handleCurrentChange(val) {
      this.pageInfo.pageNum = val;
      this.freeBeds();
    },

    Orders1(row){
      this.abcVisable = true;
      this.form = row;
      this.handleChange1(1);
    },
    //添加订单
    insertOrders() {
      insertOrder({bid:this.form.bid}).then(res=>{
          if(res.data.code==200){
            this.$message({
              message:"下单成功",
              type:"success"
              })
              this.handleChange(this.value);
               this.abcVisable = false;
          }
      })
    },
    // toOrder() {
    //   tozhifubao(
    //     "outTradeNo=" +
    //         bianhao() +
    //         "&subject=" +
    //         "测试订单" +
    //         "&totalAmount=" +
    //         this.zje+
    //         "&body=" +
    //         this.form.bnum
    //   ).then(res=>{
    //     const divForm = document.getElementById("orderPay")
    //            // const div = document.createElement("div");
    //             divForm.innerHTML = res.data; // data就是接口返回的form 表单字符串
    //             //document.body.appendChild(div);
    //             punchout_form.setAttribute("target", "_blank"); // 新开窗口跳转
    //             punchout_form.submit();

        
    //   })
    // },
    //选择医院和科室
    getAllHospitals() {
      getAllHospital().then((res) => {
        if (res.data.code == 200) {
          this.allHospital = res.data.data;

          for (var i = 0; i < this.allHospital.length; i++) {
            this.options.push({
              value: this.allHospital[i].id,
              label: this.allHospital[i].hname,
              children: [],
            });
            for (var j = 0; j < this.allHospital[i].departments.length; j++) {
              this.options[i].children.push({
                value: this.allHospital[i].departments[j].did,
                label: this.allHospital[i].departments[j].dname,
              });
            }
          }
        }
      });
    },
    handleChange(value) {
      //value代表id和did的一个数组;去查所代表的科室信息的床位信息
      getBedmentByHidAndDid({
        hidanddid: value,
        pageNum: this.pageInfo.pageNum,
        pageSize: this.pageInfo.pageSize,
      }).then((res) => {
        if (res.data.code == 200) {
          this.selectFreeBed = res.data.data;
        }
      });
    },
    handleChange1(value) {
      this.zje = value * this.form.beiyong1;
    },
  },
};
function bianhao() {
  return new Date().getTime;
}
</script>